<template>
  <div class="zx-img-preview">
    <img v-for="(item, index) in imgList" :src="item" @click="handlePreviewImg(index)" alt="">
  </div>
</template>
<script>
  import { ImagePreview } from 'vant';

  export default {
    name: 'zx-manage-work',
    components: {},
    props: {
      imgList: {
        type: Array,
        default() {
            return [];
        }
      }
    },
    data() {
      return {};
    },
    watch: {},
    computed: {},
    mounted() {
    },
    methods: {
      handlePreviewImg(index) {
        ImagePreview({
          images: this.imgList,
          startPosition: 1,
          onClose() {
            // do something
          }
        });
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  @import url('../../static/style/var');

  .zx-img-preview {
    width: 100%;
    background-color: #ffffff;
    position: relative;
    img {
      box-sizing: border-box;
      width: 25%;
      height: 50px;
      padding-right: 5px;
    }
  }
</style>
